<template>
    <div class="list">
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item prop="name">
                <template slot="label">
                    <div class="label">发送者用户名：</div>
                </template>
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
        <div style="width:99%;">
            <el-table
                    v-loading="loading"
                    :data="tableData"
                    border
                    style="width:100%;"
            >
                <el-table-column
                        prop="id"
                        label="id"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="内容"
                        width="357">
                </el-table-column>
                <el-table-column
                        prop="sendUserName"
                        label="发送人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="receives"
                        label="接收人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="readCount"
                        label="已读数" width="120">
                </el-table-column>
                <el-table-column
                        prop="receiveUserCount"
                        label="接收人数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="180">
                </el-table-column>
            </el-table>
        </div>
        <div class="block" style="margin-top:20px;">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 30, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="zong">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                ruleForm:{
                    name:""
                },
                currentPage4:1,
                tableData: [],
                pageSize:10,
                zong:10,
                loading: false,
                flag:true
            }
        },
        mounted(){
            //获取数据
            let obj = {
                "sendUserName": null,
                "pageIndex":1,
                "pageSize":this.pageSize
            }
            this.demand(obj)
        },
        methods:{
            // 请求
            demand(obj){
                this.axios({
                    url:"/api/admin/message/page",
                    method:"post",
                    data:obj
                }).then(res=>{
                    if(res.data.code==1){
                        this.zong = res.data.response.total;
                        this.tableData = res.data.response.list;
                    }
                })
            },
            //当前页的页面
            handleSizeChange(val){
                let obj = {
                    "sendUserName": null,
                    "pageIndex": 1,
                    "pageSize": val
                }
                this.demand(obj);
                this.time();
            },
            //当前页面的数量
            handleCurrentChange(val) {
                if(this.ruleForm.name == ""){
                    let obj = {
                        "sendUserName": null,
                        "pageIndex":val,
                        "pageSize":this.pageSize
                    }
                    this.demand(obj)
                }else{
                    let obj = {
                        "sendUserName": this.ruleForm.name,
                        "pageIndex":val,
                        "pageSize":this.pageSize
                    }
                    this.demand(obj)
                }
                this.time();
            },
            //搜索
            search(){
                let obj = {
                    "sendUserName": this.ruleForm.name,
                    "pageIndex":1,
                    "pageSize":this.pageSize
                }
                this.demand(obj);
                this.time();
            },
            time(){
                this.loading = true;
                setTimeout(()=>{
                    this.loading = false;
                },1000)
            },
        },
    }
</script>
<style lang="scss" scoped>
    .list{
        padding:0 20px 20px 20px;
        .label{
            font-weight:700;
        }
    }
</style>